<template>
	<view class="my-check">
		<view class="scroll-h">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index"
				@click="ontabtap">
				<text class="uni-tab-item-title"
					:class="tabIndex == index ? 'uni-tab-item-title-active' : ''">{{tab.name || ''}}</text>
				<text v-show="tabIndex == index" class="uni-tab-item-text"></text>
			</view>
		</view>
		<swiper class="swiper" duration="300" :current="tabIndex" @change="ontabchange">
			<swiper-item class="swiper-item" :key="item.id" v-for="item in tableData">
				<template v-if="item.state">
				<uni-card :is-shadow="false" :border="false" :margin="'0 0 22rpx'" :spacing="'42rpx 28rpx'" :padding="0" :key="arr.id" v-for="arr in item.data" >
					<view class="s-card">
						<view class="s-c-img">
							<image :src="arr.avatar[0]" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="s-c-com">
							<view class="c-name">
								<text class="n-text">{{arr.real_name || arr.nickname || ''}}</text>
								<view class="n-tag" :class="['','','n-tag1',''][arr.status]">
									<uni-tag :text="['','在线','离线','已预约'][arr.status]"></uni-tag>
								</view>
							</view>
							<text class="c-text">{{arr.belong_date || ''}}</text>
						</view>
						<view class="s-c-but">
							<button v-if="arr.status == 1" size="mini" class="but but-1"  @click="onClick(arr.id)">下线</button>
							<button v-else-if="arr.status == 2" size="mini" class="but">已下线</button>
							<!-- <button v-esle-if="arr.status == 3" size="mini" class="but but1">已预约</button> -->
						</view>
					</view>
				</uni-card>
				<uni-load-more v-if="item.data.length" :contentText="contentText" :status="item.status" @clickLoadMore="loadClick()"></uni-load-more>
				</template>
				<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height:100%;" v-else>
					<image :src="zanwudingdan" mode="widthFix" style="width: 360rpx;margin-bottom: 20rpx;height: 416rpx;"></image>
					<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
				</view>	
			</swiper-item>
		</swiper>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0, // 顶部切换栏状态 0：临时工 1：长期工
				tabBars: [{ // 顶部切换栏 数据
					name: '临时工',
					id: '2'
				}, {
					name: '长期工',
					id: '1'
				}],
				zanwudingdan:`${getApp().globalData.imgScr}bj/zanwudingdan.png`,
				tableData:[
					{
						id:1,
						state:true,
						data:[],
						page:1, // 初始页码
						total:0, // 数据总条数
						status:'more', // 加载更多组件的状态  more：加载前 loading：加载中 noMore：没有更多数据
					},
					{
						id:2,
						state:true,
						data:[],
						page:1, // 初始页码
						total:0, // 数据总条数
						status:'more', // 加载更多组件的状态  more：加载前 loading：加载中 noMore：没有更多数据
					}
				],
					
				
				contentText:{contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}, // 加载更多组件的提示文本
			}	
		},
		// onLoad() {
		// 	Object.assign(this.tableData, this.$options.data().tableData)
		// 	this.getData()
		// },
		async onShow() {
			let _this = this
			this.tableData[this.tabIndex].state = this.tableData[this.tabIndex].data.length 
			try{
				await Object.assign(this.tableData[this.tabIndex], this.$options.data().tableData[this.tabIndex])
				await this.getData()
			}catch(e){
				//TODO handle the exception
				uni.showToast({
					title: e.errMsg,
					icon:"none"
				})
			}
		},
		async onPullDownRefresh() {
			Object.assign(this.tableData[this.tabIndex], this.$options.data().tableData[this.tabIndex])
			
			try{
				await this.getData(this.tabBars[this.tabIndex].id)
				setTimeout(()=>{
					uni.stopPullDownRefresh();
					uni.showToast({
						title:"刷新成功",
						icon:"none"
					})
				},1000)
				
			}catch(e){
				//TODO handle the exception
				uni.showToast({
					title:e.errMsg,
					icon:"none"
				})
			}
		},
		methods: {
			/**
			 * 顶部栏 切换时触发
			 * @param {object} e  获取切换元素的实例
			 */
			ontabtap(e) {
				console.log(e);
				this.tabIndex = e.target.dataset.current || e.currentTarget.dataset.current;
			},
			/**
			 * 轮播图 页面切换时触发
			 * @param {Object} e 切换到的轮播图页面实例对象
			 */
			ontabchange(e) {
				this.tabIndex = e.target.current || e.detail.current;
				Object.assign(this.tableData[this.tabIndex], this.$options.data().tableData[this.tabIndex])
				this.getData(this.tabBars[this.tabIndex].id)
			},
			/**
			 * 下线按钮
			 * @param {string} id 当前在线记录的id
			 */
			async onClick(id) {
				try{
					let res = await this.$http.post('/index/Cleanerindex/cleaner_online_one',{id})
					Object.assign(this.tableData[this.tabIndex], this.$options.data().tableData[this.tabIndex])
					await this.getData(this.tabBars[this.tabIndex].id)
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title:e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 点击加载更多组件时触发
			 * @param {Object} e 点击时的状态
			 */
			loadClick(e) {
				if(e.detail.status == 'no-more') return this.tableData[this.tabIndex].status = "no-more"
				this.tableData[this.tabIndex].status = "loading"
				this.tableData[this.tabIndex].page += 1
				this.getData(this.tabBars[this.tabIndex].id,this.tableData[this.tabIndex].page )
			},
			/**
			 * 获取数据
			 */
			async getData(cleaner_type = 2,page = 1,limit = 10) {
				try{
					let res = await this.$http.post('/index/Cleanerindex/cleaner_online_data',{
						cleaner_type,
						page,
						limit
					})
					this.$set(this.tableData[this.tabIndex],'data',[...this.tableData[this.tabIndex].data,...res.data])
					// this.tableData[this.tabIndex].data = [...this.tableData[this.tabIndex].data,...res.data]
					this.$set(this.tableData[this.tabIndex],'total',res.total)
					this.$set(this.tableData[this.tabIndex],'state',this.tableData[this.tabIndex].data.length)
					// this.tableData[this.tabIndex].total = res.total
					// this.tableData[this.tabIndex].state = this.tableData[this.tabIndex].data.length
					this.tableData[this.tabIndex].status = this.tableData[this.tabIndex].page >= res.last_page?'no-more':'more'
				}catch(e){
					this.data[this.tabIndex].state = false
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			}
		}	
	}
</script>

<style lang="scss">
.my-check {
	display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
	
	// 顶部 长期工和短期工切换栏样式
	.scroll-h {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		.uni-tab-item {
			position: relative;
			flex: 1;
			display: inline-block;
			text-align: center;
		}
		
		.uni-tab-item-title {
			color: rgba($color: #000000, $alpha: 0.7);
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
			opacity: 0.7;
		}
		.uni-tab-item-text {
			position: absolute;
			bottom: 8rpx;
			left: 50%;
			transform: translateX(-50%);
			height: 4rpx;
			width: 36rpx;
			background: linear-gradient(255deg, #8dc9f1, #d8eefc);
			border-radius: 2rpx;
		}
		// 中间内容选项卡 字体样式
		.uni-tab-item-title-active {
			color: #000000;
			font-size: 34rpx;
			font-weight: 600;
		}
	}
	.swiper {
		width: 100%;
		flex: 1;
		box-sizing: border-box;
		padding: 22rpx 34rpx;
		overflow: auto;
		.uni-card {
			border-radius: 20rpx;
		}
		.swiper-item {
			overflow: auto;
			.s-card {
				display: flex;
				align-items: center;
				.s-c-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
					margin-right: 20rpx;
					overflow: hidden;
				}
				.s-c-com {
					flex: 1;
					display: flex;
					flex-direction: column;
					.c-name {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;
						.n-text {
							font-size: 28rpx;
							font-weight: 600;
							color: #333333;
							margin-right: 10rpx;
						}
						.n-tag {
							.uni-tag {
								width: 80rpx;
								height: 30rpx;
								font-size: 20rpx;
								font-weight: 600;
								color: #53E38C;
								border: 0;
								border-radius: 15rpx;
								background-color: rgba($color: #53E38C, $alpha: 0.1);
							}
						}
						.n-tag1 {
							.uni-tag {
								color: #D0D0D0;
								background-color: rgba($color: #DADADA, $alpha: 0.1);
							}
						}
					}
					.c-text {
						font-size: 20rpx;
						font-weight: 600;
						color: #333333;
					}
				}
				.s-c-but {
					display: flex;
					.but {
						box-sizing: border-box;
						width: 132rpx;
						line-height: 48rpx;
						border-radius: 24rpx;
						font-size: 28rpx;
						color: #D0D0D0;
						border: 1px solid #DADADA;
						background-color: #FFFFFF;
						padding: 0;
					}
					.but::after {
							display: none;
						}
					.but-1 {
						background: linear-gradient(-85deg, #1FC47B 0%, #55E58D 100%);
						color: #FFFFFF;
						border:0;
					}
				}
			}
		}
	}
}	
</style>

